﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="verify-v1" content="foUbtgskhWFshkME3GhhGgJeIUROXRk1Wi37TMeQp5U=" />
	<title>The EZPZ Way &ndash; 
EZPZ Tooltip
</title>
	
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/plugin/jquery.ezpz_tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#simple-target-1').ezpz_tooltip();
		
		$("#effects").ezpz_tooltip({
			contentId: 'simple-content-1',
			showContent: function(content) {
				content.fadeIn('slow');
			},
			hideContent: function(content) {
				// if the showing animation is still running, be sure to stop it
				// and clear the animation queue. otherwise, repeatedly hovering will
				// cause the content to blink.
				content.stop(true, true).fadeOut('slow');
			}
		});
		
		$("#static-target-1").ezpz_tooltip({
			contentPosition: 'rightStatic'
		});
		
		$("#stay-target-1").ezpz_tooltip({
			contentPosition: 'belowStatic',
			stayOnContent: true,
			offset: 0
		});
		
		$("#ajax-target-1").ezpz_tooltip({
			beforeShow: function(content){
				if (content.html() == "") {
					$.get("/ajax.txt", function(html){
						content.html(html);
					});
				}
			}
		});

		$("#fancy-target-1").ezpz_tooltip();
	});
</script>

<style type="text/css" media="screen">
	h3 { margin-top: 20px; }
	.tooltip-target {
		display: block;
		padding: 10px;
		background-color: #EEE;
		text-align: center;
	}
	.tooltip-content {
		display: none;      /* required */
		position: absolute; /* required */
		width: 250px;
		padding: 10px;
		border: 3px solid #AF8A31;
		background-color: #FFC848;
		text-align: center;
color: black;
	}
	.tooltip-content p {
		margin: 0;
	}
	#fancy-content-1 {
		border: none;
		background: url('http://s3.amazonaws.com/theezpzway/files/1/original.png');
		width: 277px;
		height: 96px;
	}
</style>

</head>

<body>

	


<div id="full-menu"><div id="menu">
	<div class="container">
		<table>
			<tr>
				<td id="mre"><a href="http://scr.im/mikee" id="mre-link-target">&nbsp;</a></td>
				<td class="cell"><a href="#" id="all-articles-target">All Articles</a></td>
				<td class="cell"><a href="#" id="all-topics-target">Topics</a></td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</div>
</div>
<div class="slide-out" id="mre-link-content">
	<h1 class="container">About the Author</h1>
	<p class="container half">
		<img src="http://www.gravatar.com/avatar/f844ff598976264471948bea939b633c?s=80" alt="Mike Enriquez Avatar" id="gravatar"/>
		Mike Enriquez is a developer and designer. He received his degree from The Ohio State University in Computer Engineering. He has experience in building everything from large scale social networking sites down to simple "business card" websites from the ground up. His favorite web technologies are currently Ruby on Rails and jQuery.  On the artistic side, Mike has been awarded a few prestigious Scholastic Art Awards and even has artwork published in a book. When he's not making websites he enjoys snowboarding, golfing, and eating ramen noodles (beef and chicken flavor).</p>
</div>
<div class="slide-out" id="all-articles-content">
	<ul class="container">
		
		<li><a href="/2010/2/21/namespaced-controller-and-link-to-helper-in-rails">Namespaced controller and url generation gotcha in Rails</a></li>
		
		<li><a href="/2010/2/21/dont-forget-about-respond-to-when-implementing-method-missing">Don't forget about respond_to? when implementing method_missing</a></li>
		
		<li><a href="/2009/5/1/how-to-build-a-personal-mashup-page-with-jquery">How to build a personal mashup page with jQuery</a></li>
		
		<li><a href="/2009/3/28/jquery-plugin-ezpz-hint">jQuery plugin EZPZ Hint</a></li>
		
		<li><a href="/2009/3/17/jquery-plugin-ezpz-tooltip">jQuery plugin EZPZ Tooltip</a></li>
		
		<li><a href="/2009/3/8/chocolate-meat-mephisto-theme">Chocolate Meat Mephisto Theme</a></li>
		
		<li><a href="/2009/3/8/how-to-integrate-ultraviolet-into-mephisto">How to integrate Ultraviolet into Mephisto</a></li>
		
	</ul>
</div>
<div class="slide-out" id="all-topics-content">
	<ul class="container">
		
		<li><a href="/topics/jquery">jQuery</a> (3)</li>
		
		<li><a href="/topics/mephisto">Mephisto</a> (2)</li>
		
		<li><a href="/topics/rails">Rails</a> (1)</li>
		
		<li><a href="/topics/ruby">Ruby</a> (1)</li>
		
	</ul>
</div></div>

<div class="container" id="header">
	<a href="/"><img alt="Theezpzway" id="logo" src="/images/theezpzway.png?1288828195" /></a>
	<p id="info">This is the blog of <a href="http://enriquez.me">Mike Enriquez</a>, a Web Developer working for <a href="http://edgecase.com">EdgeCase, LLC</a> in Columbus, OH.</p>
</div>


<div id="content">

<h1><a href="/demos/ezpz-tooltip">EZPZ Tooltip Demo</a></h1>

<p>The following are some examples of how the EZPZ Tooltip can be used.</p>

<p><a href="/2009/3/17/jquery-plugin-ezpz-tooltip">Click here to visit the documentation</a></p>

<div class="demo">
	<h2>Default, no options</h2>
	<p>
		The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.
	</p>
	<div class="simple-tooltip-target tooltip-target" id="simple-target-1">Simple ToolTip</div>
	<div class="simple-tooltip-content tooltip-content" id="simple-content-1">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...
		</p>
	</div>
<div class="ultraviolet">
<pre class="blackboard"><span class="Support">$</span>(&quot;<span class="Entity"><span class="Entity">#</span>simple-target-1</span>&quot;).ezpz_tooltip();
</pre></div>

</div>

<div class="demo">
	<h2>Effects</h2>
	<p>
		The options <code>showContent(content){}</code> and <code>hideContent(content){}</code> allow you to customize how the content element is shown and hidden.  Given a reference to the content element, you can call an effect on it.
	</p>

	<div class="effects-tooltip-target tooltip-target" id="effects">Effects ToolTip</div>
<div class="ultraviolet">
<pre class="blackboard"><span class="Support">$</span>(&quot;<span class="Entity"><span class="Entity">#</span>effects</span>&quot;).ezpz_tooltip({
	contentId: <span class="String"><span class="String">'</span>simple-content-1<span class="String">'</span></span>,
	<span class="Entity">showContent</span>: <span class="Storage">function</span>(<span class="Variable">content</span>) {
		content<span class="Support">.fadeIn</span>(<span class="String"><span class="String">'</span>slow<span class="String">'</span></span>);
	},
	<span class="Entity">hideContent</span>: <span class="Storage">function</span>(<span class="Variable">content</span>) {
		<span class="Comment"><span class="Comment">//</span> if the showing animation is still running, be sure to stop it</span>
		<span class="Comment"><span class="Comment">//</span> and clear the animation queue. otherwise, repeatedly hovering will</span>
		<span class="Comment"><span class="Comment">//</span> cause the content to blink.</span>
		content.<span class="Support">stop</span>(<span class="Constant">true</span>, <span class="Constant">true</span>)<span class="Support">.fadeOut</span>(<span class="String"><span class="String">'</span>slow<span class="String">'</span></span>);
	}
});
</pre></div>

</div>

<div class="demo">
	<h2>Static Position</h2>
	<p>The tooltip appears in a static position relative to the target.</p>
	<div class="static-tooltip-target tooltip-target" id="static-target-1">Static Position ToolTip</div>
	<div class="static-tooltip-content tooltip-content" id="static-content-1">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...
		</p>
	</div>
<div class="ultraviolet">
<pre class="blackboard"><span class="Support">$</span>(&quot;<span class="Entity"><span class="Entity">#</span>static-target-1</span>&quot;).ezpz_tooltip({
	contentPosition: <span class="String"><span class="String">'</span>rightStatic<span class="String">'</span></span>
});
</pre></div>

</div>

<div class="demo">
	<h2>Stay on Content</h2>
	<p>A static tooltip that stays visible when mouse is over the target and the content.</p>
	<div class="stay-tooltip-target tooltip-target" id="stay-target-1">Stay on Content ToolTip</div>
	<div class="stay-tooltip-content tooltip-content" id="stay-content-1">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...<br />
			<a href="javascript:">You can reach down and click this</a>
		</p>
	</div>
<div class="ultraviolet">
<pre class="blackboard"><span class="Support">$</span>(&quot;<span class="Entity"><span class="Entity">#</span>stay-target-1</span>&quot;).ezpz_tooltip({
	contentPosition: <span class="String"><span class="String">'</span>belowStatic<span class="String">'</span></span>,
	stayOnContent: <span class="Constant">true</span>,
	offset: <span class="Constant">0</span>
});
</pre></div>

</div>

<div class="demo">
	<h2>AJAX</h2>
	<p>A tooltip with the content loaded with AJAX</p>
	<div class="ajax-tooltip-target tooltip-target" id="ajax-target-1">AJAX ToolTip</div>
	<div class="ajax-tooltip-content tooltip-content" id="ajax-content-1"></div>
<div class="ultraviolet">
<pre class="blackboard"><span class="Support">$</span>(&quot;<span class="Entity"><span class="Entity">#</span>ajax-target-1</span>&quot;).ezpz_tooltip({
	<span class="Entity">beforeShow</span>: <span class="Storage">function</span>(<span class="Variable">content</span>){
		<span class="Keyword">if</span> (content<span class="Support">.html</span>() <span class="Keyword">==</span> <span class="String"><span class="String">&quot;</span><span class="String">&quot;</span></span>) {
			<span class="Keyword">$</span><span class="Support">.get</span>(<span class="String"><span class="String">&quot;</span>/ajax.html<span class="String">&quot;</span></span>, <span class="Storage">function</span>(html){
				content<span class="Support">.html</span>(html);
			});
		}
	}
});
</pre></div>

</div>

<div class="demo">
	<h2>Getting Fancy with it</h2>
	<p>Using CSS, the content element can be styled with a background image that uses transparencies.</p>
	<div class="fancy-tooltip-target tooltip-target" id="fancy-target-1">Fancy ToolTip</div>
	<div class="fancy-tooltip-content tooltip-content" id="fancy-content-1">Wow! That's EZPZ!</div>
</div>

</div>

<ul id="toc" class="box">
	<li>
<h1>Sections</h1>
<a href="#">Top</a></li>
</ul>

<div class="container" id="footer">
	&copy; 2009-2010 Mike Enriquez
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8022282-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
